LAST UPDATED: 04/04/2025
INTRODUCTION
Live Case Study

This is a live case study documenting how I designed and built this portfolio. You'll be able to interact with it directly and give real-time feedback, helping shape my growth while experiencing my UX thinking first-hand.

Before We Start
What To Know
Extended Content

The Extended Content toggle puts you, the viewer, in control. I created this feature as a way to recognise that not all viewers of my portfolio will want to consume my content in the same way.

By clicking the 'Extended mode' option, additional details about my process will appear. The transition is smooth, featuring a typing animation. It can also be toggled on or off at any point, with no reloads and no interruptions.

User Feedback

This survey is designed to test my UX decisions and improve both the design and experience of this portfolio. It is based on real feedback from users like yourself. All responses are completely anonymous.

The questions are short and multiple choice, appearing naturally as you scroll. They auto-submit once you move on from the question, so they will be easy to answer without breaking your attention.

All feedback is valuable. Whether you answer some, none, or all of the questions, I appreciate it greatly.

The final question at the bottom of the page is open-ended and includes a submit button. This is for optional, more detailed feedback.

Problem
The Challenge
Identifying user needs, limitations, and opportunities
What challenge was I facing?

The UX industry is highly competitive, particularly for junior designers who are just emerging from study and looking to break into the field. Without real client work to show, I needed a way to stand out.

Who Is Affected By This Problem?

Junior designers like me who have recently finished university and are entering a highly competitive industry.

Why Was It A Problem?

With so much competition, my portfolio risked being overlooked. I needed to find a way to demonstrate my skills in a way that felt real and engaging.

What Decision Did This Lead To?

It led me to turn my portfolio into a live case study. I also included survey questions throughout the case study to gather valuable feedback directly from my target audience, hiring managers.

Backend & Technical Setup

I had limited time, a full schedule balancing work and family, and technical limitations. I had to teach myself backend fundamentals in order to build and host this project on my own.

How Did This Affect My Thinking

It made me step back and rethink what a portfolio could be. I started asking myself what kind of experience I could create, what questions would the user be wanting answered and which UX practices would help me do it well.

ROLE
Roles & Responsibilities
Strategy & UX Design

Framed the portfolio as a live case study with real user feedback

Identified the target audience and crafted a feedback loop

Researched competitors and mapped user journeys

Defined user problems and goals

Created content hierarchy and extended/regular modes

UI & Frontend Development

Designed layouts and components in Figma

Applied typography, spacing, colour, and grids

Built a custom, accessible interface using HTML, CSS, and JavaScript

Implemented animations and interactions with GSAP

Video Editing and Rendering

Writing & Microcopy

Wrote clear, purposeful headings, prompts, and labels

Balanced friendly tone with professionalism

Crafted consistent voice across regular and extended content

Analytics & Project Management

Embedded survey system to gather real user feedback

Planned ongoing iterations based on usage insights

Managed timeline, workflows, and documentation independently

APPLICATION
Bringing It To Life
The Approach

I began by asking a simple question: what should a UX portfolio actually do? To find out, I looked at a range of portfolios from successful designers. I paid attention to how they presented their work, how their content was structured, what felt effective, and what didn't.

Through this research, one thing became clear. If I'm applying for UX roles, my portfolio needs to reflect good UX. It should be easy to navigate, respectful of the viewer's time, and engaging enough to stand out.

I also realised that reaching my target audience, hiring managers, wasn't going to be easy. Most portfolios don't provide a way for the viewer to participate or leave feedback, which felt like a missed opportunity. I saw a gap.

That's when I started thinking differently. What if my portfolio wasn't a static showcase, but a living product? Something that could grow and evolve through real user input. That thought became the foundation for what you're experiencing now. It is a live case study shaped by real feedback.

Methods

Researched successful UX portfolios to understand what worked well and what didn't

Ideated ways to push the concept further and create something more interactive

Prototyped the layout, flow, and features in Figma

Built and launched the site as a live testing space where hiring managers like you are now part of the process

Tools

Figma - UI design, prototyping

GSAP - Animations, typing effects

Visual Studio Code - Code editor

Illustrator - Custom graphics, icons

HTML, CSS, JavaScript

Firebase CLI - Hosting and Deploying

Photoshop - Image editing

Firebase - Backend, survey responses

Git / GitHub - version-controlled

Staying User Focused

Hiring managers were always at the core of my thinking. I kept asking:

What questions do hiring managers want answered?

How can I respect their time?

How can I create a memorable experience?

These questions shaped everything from structure to tone. I made sure key information was easy to find, kept case studies concise by default, and added the option to explore more through extended content. I also embedded a short survey throughout the experience so viewers could give feedback without being interrupted. All of these choices were made to respect time, reduce friction, and make the experience feel intentional.

Solution
What I Created
An Evolving UX-Driven Experience
Result

I created a unique portfolio experience designed to stand out to hiring managers. It gives users control over how much content they see, offers the opportunity to provide live feedback, and demonstrates my approach to solving real problems, not just within case studies but through the portfolio itself. It is a working, evolving case study that users are actively participating in.

Differentiating Factor

In my research, I found that a common issue with portfolios is either being overloaded with information or too minimal, lacking enough detail. To solve this, I introduced a toggle that lets users choose the level of content they want to see. This keeps the experience immersive while also being respectful of the user's time. Another one of my core UX beliefs is that a portfolio should never be static. It should actively evolve. This portfolio revolves around receiving feedback, showing that I'm not just open to critique but actively inviting it in order to iterate and improve.

Skills Shown

This project puts my UX thinking, UI design, and frontend development into action. It demonstrates:

Clear communication of ideas

Prototyping in Figma

Frontend development with custom code and GSAP animations

Visual design principles through typography, layout, and interaction

Illustration and animation to support storytelling

Working effectively within technical and time constraints

Prioritising the user experience in every decision

REFLECTION
What's Next
Improving Through Feedback
Ongoing Project

This portfolio is a live case study that will continue to evolve. Every interaction and piece of feedback contributes to its next iteration. My goal moving forward is to keep refining not just the portfolio, but also myself as a designer who listens, learns, and creates with purpose.